<template>
  <div>
    <!-- <navTop :headTitle="headTitle" :showBack="showBack" :bkParam="bkParam" style="margin-bottom:2.5rem"></navTop> -->
    <section>
      <mt-field class="mtInput" label="姓名" placeholder="请输真实姓名" v-model="username"></mt-field>
      <mt-field class="mtInput" label="身份证号" placeholder="请输入身份证号"
        v-model="sfzh"
      ></mt-field>
      <mt-field class="mtInput" label="手机号" placeholder="请输入手机号" type="tel"
        v-model="mobile"
      ></mt-field>
      <mt-field class="mtInput" label="手机验证码" size="normal" placeholder="请输入验证码"
        v-model="mobilevalicode"
      >
        <mt-button :class="{'buttonTime' : !changeValiButton}" type="primary" size="normal" @click.native="getMobileCode"
          plain
        >
          <span v-if="changeValiButton">{{valiButton}}</span>
          <span v-else>{{minutes}} : {{seconds}}</span>
        </mt-button>
      </mt-field>
      <mt-field class="mtInput" v-if="errTime" label="验证码" v-model="valicode">
        <img src="" height="45px" width="100px">
      </mt-field>
      <mt-button class="mtInput" type="primary" size="large" @click.native="doRegister">提交注册</mt-button>
    </section>

    <!-- 注册页面
    <section style="padding-top:4rem" class="login-wrap">
      <input type="text" placeholder="用户名：" class="input_tip" v-model="username">
      <input type="text" placeholder="手机号：" class="input_tip" v-model="mobile">
      <input type="text" placeholder="身份证号：" class="input_tip" v-model="userid">
      < <div><input type="text" placeholder="身份证号：" class="input_tip" v-model="zyzh"></div> 备用
      <div v-show="errTime"><input type="text" placeholder="验证码：" class="input_tip" v-model="valicode"><input type="text" class="input_tip" v-model="valicodeback"><span>输错超过3次，请输入验证码</span></div>
      <input type="text" placeholder="手机验证码：" class="input_tip" v-model="mobilevalicode"><input @click="getMobileCode" value="获取短信验证码" type="button"/>
      <input type="button" value="提交注册" class="input_search" @click="doRegister"/>
    </section>
     隐藏的提示页面 -->
    <section>
    </section>
  </div>
</template>

<script>
import navTop from '~/components/common/navTop';
import { isIdCardNo } from '../plugins/date.js';
const { config } = window; 
export default {
  data() {
    return {
      changeValiButton: true,
      valiButton: '获取验证码',
      showBack: false,
      bkParam: 'bk',
      // 对用户输入的每一个注册信息，都要进行正则表达式校验
      ts: this.newStore(),
      headTitle: '注册',
      title: '注册',
      username: '',
      mobile: '',
      userid: '',
      sfzh:'',
      openid: '',
      ttid:'',
      zyzh: '', // 备用
      valicode: '', // 用户提交的验证码
      mobilevalicode: '', // 用户提交的手机验证码
      errTime: false,
      valicodeback: '', // 服务返回的验证码，VUE转为图片
      code: '',
      extReturn: '', // 验证是否当前手机
      minutes: 1,
      seconds: 0,
    };
  },
  created() {
    
  },
  mounted() {
    // 获取code
    this.openid = localStorage.getItem('openid');
     if (config.MODE == 'dev') {
     this.openid='owmxq1Jx2am0miZ_AO6C6BM12oO41';
     }
    if(!this.openid||this.openid == ''){
      this.$router.push('/');
      return;
    }
  },
  destroyed() {
  },
  components: {
    navTop,
  },
  computed: {
    second() {
      return this.num(this.seconds);
    },
    minute() {
      return this.num(this.minutes);
    },
  },
  methods: {
    //
    timer() {
      const _this = this;
      const time = window.setInterval(() => {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59;
          _this.minutes -= 1;
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          _this.seconds = 0;
          window.clearInterval(time);
          // this.$router.back(-1);
          this.changeValiButton = true; // 切换显示按扭内容
        } else {
          _this.seconds -= 1;
        }
      }, 1000);
    },
    // 获取code
    getUrlParam(name) { // ---返回的地址列表中获取CODE, name="code"
      const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
      const r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 提交注册
    doRegister() {

    

      if(!this.openid||this.openid==''||this.openid=='null'){
        this.$messagebox('注册提示', '参数错误');

        return;
      }

      if(this.username.length<1){
        this.$messagebox('注册提示', '姓名不能为空');
        return;
      }

      if(this.mobile.length<1){
        this.$messagebox('注册提示', '手机号不能为空');
        return;
      }

      if(this.mobilevalicode.length<1){
        this.$messagebox('注册提示', '验证码不能为空');
        return;
      }
       if(this.sfzh.length<1){
        this.$messagebox('注册提示', '身份证号不能为空');
        return;
      } 
      if(!isIdCardNo(this.sfzh)){
        this.$messagebox('注册提示', '请输入正确的身份证号');
        return;
      }     
      /*
      if(this.ttid.length<1){
        this.$messagebox('注册提示', '请先获得验证码');
        return;
      }
      */

      const regUrl = '/doctor/WeixinLogin.lg?reqType=register&lt='+config.LT+'&hosid='+config.hosInfo.HOSID+'&username='+encodeURI(encodeURI(this.username))+'&mobile='+this.mobile+'&mobilevalicode='+this.mobilevalicode+'&ttid='+this.ttid+'&openid='+this.openid+'&sfzh='+this.sfzh;
      this.spost(this.ts, regUrl).then((ts) => {
        if (ts.d.errCode == '200') {
          this.$messagebox('注册提示', '注册成功');
          this.$router.push({'name':'index'});
          return;
        } else {
          // 发布到项目中时使用自定义的弹窗
          this.$messagebox('注册提示', `失败：${ts.d.errMessage}`);
        }

      });
    },

    // 获取验证码, 当 errTime > 3 时调用
    // 要求，当用户点击获取短信验证码后，页面自动计时，半小时内“获取”按扭不可用，并显示倒计时时间样式,时限取消后点击图片更新
    getCode() {
      this.spost(this.ts, '/doctor/WeixinLogin.lg', {
        reqType: 'getCode',
        RYBID: 'PAT',
      }).then((ts) => {
        // alert(JSON.stringify(ts.d));
        this.valicodeback = ts.d.valicode;
      });
    },
    // 获取短信验证码
    // 要求，当用户点击获取短信验证码后，页面自动计时，半小时内“获取”按扭不可用，并显示倒计时时间样式,时限取消后点击更新
    getMobileCode() {
      if (!this.changeValiButton) {
        return;
      }
      this.spost(this.ts, 'https://zyext.renyibao.com/LoginServlet?reqType=mcode&mobile='+this.mobile).then((ts) => {

        if (ts.d.errCode == '200') {
          this.$messagebox('提示', '验证码已经发送到您的手机上，请在1分钟内输入验证码'); // 发布到项目中时使用自定义的弹窗
          this.minutes = 1;
          this.timer(); // 获得验证码按扭开始倒计时5分钟
          
          this.ttid = ts.d.rybData.ttid;

          this.changeValiButton = false;
        } else if (ts.d.errCode == '514') {
          this.$messagebox(`${ts.d.errMessage}`); // 发布到项目中时使用自定义的弹窗
        } else if (ts.d.errCode == '515') {
          this.$messagebox('非法操作'); // 发布到项目中时使用自定义的弹窗
        } else {
          this.$messagebox(`短信服务异常:   ${ts.d.errMessage}`);
        }
      });
    },
  },
};
</script>
<style scoped lang="stylus">
.buttonTime{
    border: 1px solid #ccc;
    background-color: transparent;
    color: rgb(87, 84, 84);
    display: inline-block;
    padding: 0 12px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 18px;
    height: 41px;
    outline: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.mtInput{
  margin-bottom: .5rem;
}
.login-wrap{text-align:center;}
    input{
      display:block;
      width:90%;
      height:40px;
      line-height:20px;
      margin:0 auto;
      /* margin-bottom: 10px; */
      outline:none;
      border:1px solid #ccc;
      padding:10px;
      box-sizing:border-box;}
.mint-button--large {
  /* display: -webkit-inline-box; */
  width: 90%;
  margin: 2rem auto;
}
</style>
